<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="page">
  {
    "layout": "tabbar",
    "style": {
      // 'custom' 表示开启自定义导航栏，默认 'default'
      "navigationStyle": "custom",
      "navigationBarTitleText": "消息"
    }
  }
</route>

<script lang="ts" setup>
// import { useUserStore } from '@/store/modules/user'
import {useChatStore} from '@/store/modules/chatStore.js'
import { useToast } from 'wot-design-uni'
import dayjs from 'dayjs'
const toast = useToast()
const chatStore = useChatStore()

defineOptions({
  name: 'ImHome',
})
const showSearch = ref(false)
const searchText = ref('')
const menu = reactive({
  show: false,
  style: '',
  chatIdx: -1,
  isTouchMove: false,
  items: [
    { key: 'DELETE', name: '删除该聊天', icon: 'trash', color: '#e64e4e', },
    { key: 'TOP', name: '置顶该聊天', icon: 'arrow-up', },
  ],
})

const loading = computed(() => {
  return chatStore.isLoading();
})
function onSelectMenu(item, chatIdx) {
  switch (item.key) {
    case 'DELETE':
      removeChat(chatIdx);
      break;
    case 'TOP':
      moveToTop(chatIdx);
      break;
    default:
      break;
  }
  menu.show = false;
}
function removeChat(chatIdx) {
  chatStore.removeChat(chatIdx);
}
function moveToTop(chatIdx) {
  chatStore.moveTop(chatIdx);
}
function isShowChat(chat) {
  if (chat.delete) {
    return false;
  }
  return !searchText.value || chat.showName.includes(searchText.value)
}
const handleClickLeft = () => {
  uni.switchTab({ url: '/pages/index/index' })
}

onShow(async () => {})
</script>

<template>
  <view class="bg-main h-full flex flex-col">
    <wd-navbar title="消息"/>
    <wd-search v-model="searchText" placeholder="搜索" hide-cancel />
    <view v-if="loading" class="flex justify-center items-center gap-2 pt-4">
      <wd-loading size="20"/><view>消息接收中...</view>
    </view>
      
    <view class="chat-tip" v-if="!loading && chatStore.chats.length == 0">
			温馨提示：您现在还没有任何聊天消息，快跟您的好友发起聊天吧~
		</view>
    <view v-else class="flex-1 h-20 topLine">
      <scroll-view class="scroll-bar" style="height: 100%" :scroll-with-animation="true" :scroll-y="true">
        <view v-for="(chat, index) in chatStore.chats" :key="index">
          <long-press-menu v-if="isShowChat(chat)" :items="menu.items" @select="onSelectMenu($event, index)">
            <im-chat-item :chat="chat" :index="index" :active="menu.chatIdx == index"></im-chat-item>
          </long-press-menu>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
</style>
  